<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>设备型号查询</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <link href="index.css" rel="stylesheet">
</head>

<body>
    <div class="container">
        <div class="row d-flex justify-content-center">
            <div class="col-md-6 d-flex flex-column">
                <h2 class="mt-5 mb-5">设备型号查询</h2>
                <div class="input-group input-group-lg mb-3">
                    <div class="input-group-prepend">
                        <button id="dropdownButton" class="btn btn-outline-secondary dropdown-toggle" type="button"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">A-型号</button>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="javascript:changeA();void(0)">A-型号</a>
                            <a class="dropdown-item" href="javascript:changeM();void(0)">部件号</a>
                        </div>
                    </div>
                    <input id="inputBox" type="text" class="form-control" placeholder="输入形如 Axxxx 的编号，如 A1920"
                        aria-label="Recipient's username" aria-describedby="button-addon2">
                    <div class="input-group-append">
                        <button class="btn btn-success" type="button" id="button-addon2" onclick="query();">查询</button>
                    </div>
                </div>
                <div class="card d-none" id="result">
                    <div class="card-header">查询结果</div>
                    <div class="row no-gutters">
                        <div class="col-md-6">
                            <div class="card-body">
                                <h5 class="card-title" id="resultTitle"></h5>
                                <p class="card-text"><small>不保证查询结果 100% 正确</small></p>
                                <a id="resultButton" href="index.html" class="btn btn-primary">查看越狱状态</a>
                            </div>
                        </div>
                        <div class="d-none d-md-block col-md-6 small-device-img-container">
                            <img class="small-device-img" src="">
                        </div>
                    </div>
                </div>
                <div>
                    <h4 class="mt-5 mb-2">如何找到型号？</h4>
                    <ul class="list-group">
                        <li class="list-group-item"><a href="https://support.apple.com/zh-cn/HT208200">查找 iPhone、iPad 或
                                iPod touch 的型号</a></li>
                        <li class="list-group-item"><a href="https://support.apple.com/zh-cn/HT204507">查找 Apple Watch
                                的型号</a></li>
                        <li class="list-group-item"><a href="https://support.apple.com/en-us/HT200008">Identify your
                                Apple TV model</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script>
        var type = 0;
        var model = undefined;
        var modelAlter = undefined;
        var device = undefined;
        $.ajaxSettings.async = false;
        function changeA() {
            type = 0;
            $('#inputBox').attr('placeholder', '输入形如 Axxxx 的编号，如 A1920');
            $('#dropdownButton').text('A-型号');
        }
        function changeM() {
            type = 1;
            $('#inputBox').attr('placeholder', '输入部件号，如MT9Y2CH/A');
            $('#dropdownButton').text('部件号');
        }
        function getNameFromIdentifier(identifier) {
            if (typeof (device) === "undefined") {
                $.getJSON('data/device.json', json => device = json);
            }
            $('.small-device-img').attr('src', `https://ipsw.me/assets/devices/${identifier}.png`);
            for (let product in device) {
                for (let i in device[product]) {
                    let list = device[product][i].devices;
                    for (let j in list) {
                        if (identifier === list[j].identifier) {
                            return [device[product][i].name, product];
                        }
                    }
                }
            }
            return undefined;
        }

        function show(result) {
            if (result) {
                $('#result').removeClass('d-none');
                $('#resultTitle').text(result[0]);
                let param = new URLSearchParams();
                param.set('product', result[1]);
                param.set('name', result[0]);
                $('#resultButton').attr('href', 'index.html?' + param.toString());
            } else {
                alert('未能查找到设备。');
            }
        }

        function query() {
            if (type === 1) {
                if (typeof (modelAlter) === "undefined") {
                    $.getJSON('data/model-alter.json', json => modelAlter = json);
                    console.log(modelAlter);
                }
                let key = $('#inputBox').val().substr(0, 5);
                key[0] = 'M';
                console.log(key);
                let identifier = (k => {
                    for (id in modelAlter) {
                        for (j in modelAlter[id]) {
                            if (k === modelAlter[id][j]) {
                                return id;
                            }
                        }
                    }
                    return undefined;
                })(key);
                if (typeof (identifier) === "undefined") {
                    alert('未能查找到设备。');
                    return;
                }
                let result = getNameFromIdentifier(identifier);
                show(result);
            } else if (type === 0) {
                if (typeof (model) === "undefined") {
                    $.getJSON('data/model.json', json => model = json);
                    console.log(model);
                }
                let key = $('#inputBox').val();
                if (key in model) {
                    let identifier = model[key];
                    console.log(identifier);
                    let result = getNameFromIdentifier(identifier);
                    show(result);
                } else {
                    alert('未能查找到设备。');
                }
            }
        }
    </script>
</body>

</html>